<template>
  <div
    class="_overall_group overall-flex overall-align-center"
    :style="{
      gap: gap,
      'font-size': size,
      color,
    }"
  >
    <span
      class="_overall_group-line"
      v-if="align == 'right' || align == 'center'"
    ></span>
    <span class="_overall_group-title">{{ title }}</span>
    <span
      class="_overall_group-line"
      v-if="align == 'left' || align == 'center'"
    ></span>
  </div>
</template>

<script>
export default {
  name: "ta-group",
  props: {
    align: {
      type: String,
      default: "left",
    },
    title: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "13px",
    },
    gap: {
      type: String,
      default: "15px",
    },
    color: {
      type: String,
      default: "gray",
    },
  },
};
</script>

<style scoped lang="scss">
._overall_group {
  color: gray;
  &-line {
    flex: 1;
    height: 1px;
    background: $border-color;
  }
}
</style>
